<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="shortcut icon" id="favicon" href="https://vd006-universe-portal-wap.shubonylon.com/favicon.ico?v=3">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
		<meta name="version" sha="539633bc" b_ts="1708503252" tag="release-4.18.1" content="v4.18.1-a" ts="">
		<meta http-equiv="Expires" content="0">
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Cache-control" content="no-cache">
		<meta http-equiv="Cache" content="no-cache">
		<meta name="theme-color" content="#FFFFFF">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<title>ROBIN HOOD CUP</title>
		<link rel="stylesheet" href="css/main.f4262188.css">
		<link rel="stylesheet" type="text/css" href="css/80208.edd6eb4a.chunk.css">
		<link rel="stylesheet" type="text/css" href="css/43178.b07e442c.chunk.css">
		<link rel="stylesheet" type="text/css" href="css/14172.747a5685.chunk.css">
		<link rel="stylesheet" type="text/css" href="css/app.4124dd2.css" />
		<style type="text/css">
			:root {
				--text-secondary: #666666;
				--text-white: #FFFFFF;
				--text-black: #000000;
				--bg-primary: #FFFFFF;
				--border-primary: #DDDDDD;
				--primary-base: #0C186C;
			}
		
			.Layout_scrollable__BUXYp {
				margin-top: 10px;
			}
			.SimpleHeader_rightSide__x3fiG{
				display: flex;
				justify-content: flex-end;
			}
			
			.SimpleHeader_rightSide__x3fiG .active {
				background-color: #0C186C;
				color: #FFFFFF;
			}
		</style>
		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/request.js"></script>
	</head>
	<body class="mobile light" style="overflow: auto;">
		<div class="Layout_main__F3C6D" id="app">
			<div class="MobileMenu_wrapper__t9WOf"
				style="transform: translateY(0px); transition: all 0.3s ease 0s;">
				<div class="MobileMenu_inner__u+u2d">
					<div class="MobileMenu_radiusBox__9+2HT">
						<div class="LoginHeader_topSection__1XOO+">
							<img src="img/logo.png" alt="logo"
								style="width: auto;">
						</div>
						<!--<div class="CategoryTabs_menu__IXQI-">
							<div class="Tabs_wrapper__IuwwT">
								<nav class="Tabs_nav-tabs__onO0J">
									<div class="Tabs_active__oyxFA Tabs_nav-item__2GLeK">
										<div><span>SCHEDULE</span></div>
									</div>
									<a href="points.html" class="Tabs_nav-item__2GLeK">
										<div><span>POINTS</span></div>
									</a>
								</nav>
							</div>
						</div>-->
						<div class="MobileMenu_sport-menu__FtIHM">
							<div class="MobileMenu_sport-menu-list__nUlQE">
								<div class="MobileMenu_sport-menu-content__E3vhb sport-menu-content">
									<a class="Button_wrapper__7B6Bg MobileMenu_ball-type__hkEbi " @click="changeSports(index)"
										:class="{'MobileMenu_active__Kl6is': sports === item.name}" v-for="(item,index) in sportsList">
										<img :alt="item.name" :src="'img/' + item.img">
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<section class="Layout_container__WVln4">
				<div class="Layout_content__JVGjp">
					<div class="SimpleHeader_rightSide__x3fiG">
						<div class="SimpleHeader_options__vdn+c" v-for="(item,index) in dayList"
							:class="{'active':day === item.value}" @click="dayChange(index)">
							<div>{{item.text}}</div>
						</div>
					</div>
					<div class="Layout_scrollable__BUXYp" v-for="(item,index) in dataList">
						<div v-if="'-' !== item.title" class="SimpleHeader_SimpleHeader__O+HsP SimpleHeader_topRadiusCircle__OQBaw lg:select-none">
							<div class="SimpleHeader_leftSide__JVvM9">
								<!--<div><img :src="'MALE' === item.gender ? 'img/male.png' : 'img/female.png'"></div>-->
								<div>{{item.title}}</div>
							</div>
						</div>
						<div class="Collapse_box__mic7I Collapse_childrenIsShow__asAj9 Collapse_rwdAllGame__KOfLT">
							<ul class="dataList">
								<li class="ftb-lier-base" v-for="(team, idx) in item.list">
									<div class="ftb-lier-base">
										<a class="linkk">
											<div class="top-mod box_h">
												<div class="com-name" style="color: var(--primary-base);">{{team.time}}
												</div>
												<div class="person-num">
													<div class="proson">
														<span class="gay">{{team.status}}</span>
													</div>
												</div>
											</div>
											<div class="mid-mod box_h">
												<div class="flex11 home">
													<div class="team-home">{{team.team1}}</div>
													<div class="team-score">{{team.score1}}</div>
												</div>
												<div class="vs">VS</div>
												<div class="flex11 home">
													<div class="team-home">{{team.team2}}</div>
													<div class="team-score">{{team.score2}}</div>
												</div>
											</div>
										</a>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</section>
		</div>
	</body>
	<script>
		const App = {
			data() {
				return {
					sports: 'Football',
					sportsList: [{name: 'Football', img: 'football.png'},{name: 'Basketball', img: 'basketball.png'},
								 {name: 'Volleyball', img: 'volleyball.png'},{name: 'Table Tennis', img: 'table-tennis.png'},
								 {name: 'Badminton', img: 'badminton.png'},{name: 'Tennis', img: 'tennis.png'}],
					day: '1',
					dayList: [{text: 'DAY1', value: '1'},{text: 'DAY2', value: '2'}],
					dataList: []
				}
			},
			created(){
				this.getList()
			},
			methods: {
				getList(){
					get('sys/gymSportsInvitation/app/listForApp?day=' + this.day + '&sports=' + this.sports).then(response => {
						this.dataList = response.data
					}).catch(err => {
						console.log(err);
					});
				},
				dayChange(idx){
					this.day = this.dayList[idx].value
					this.getList()
				},
				changeSports(idx){
					this.sports = this.sportsList[idx].name
					this.getList()
				}
			}
		};
		Vue.createApp(App).mount('#app');
	</script>
</html>
